<template>
    <div class="setmall_customer_create">
        <div class="setmall_customer_create_template">
            <el-button type="primary" @click="handleCreate" v-auth="'setmall_notice_subscribe:add'">
                添加模版
            </el-button>
        </div>
        <el-table :data="tableList" stripe>
            <el-table-column v-for="{ prop, ...rest } in tableColumns" :key="prop" :prop="prop" v-bind="rest">
                <template #default="{ row }" v-if="prop === 'operations'">
                    <el-popconfirm
                        placement="top"
                        width="250px"
                        title="删除后，将无法使用该模板。确定要删除吗？"
                        @confirm="handleRemove(row)"
                        confirm-button-text="确定"
                        cancel-button-text="取消">
                        <template #reference>
                            <el-button size="small" v-auth="'setmall_notice_subscribe:delete'">删除</el-button>
                        </template>
                    </el-popconfirm>
                    <el-popover trigger="click" width="300">
                        <template #reference>
                            <el-button size="small" v-auth="'setmall_notice_subscribe:view'">预览</el-button>
                        </template>
                        <div class="select-keyword-right">
                            <div class="select-keyword-right-title">
                                <img
                                    src="@/assets/imgs/sys/wechat-dark-icon.png"
                                    style="width: 16px; margin-right: 6px"
                                    alt="" />
                                小程序名称
                            </div>
                            <div class="select-keyword-right-scroll">
                                <!-- todo:拖动排序后的关键词预览 -->
                                <h5>{{ row.title }}</h5>
                                <div v-for="{ kid, name } in row.keywordList" :key="kid">
                                    <span>{{ name }}</span
                                    ><span>{{ '{' + name + '}' }}</span>
                                </div>
                            </div>
                            <div class="select-keyword-right-view">
                                查看详情
                                <el-icon><ArrowRight /></el-icon>
                            </div>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <CreateDialog v-model="dialogVisible" @handle-refresh="queryCouponListHandler"></CreateDialog>
    </div>
</template>

<script setup>
import { computed, reactive, ref, unref, defineAsyncComponent, onMounted } from 'vue';
import CreateDialog from './createDialog.vue';
import request from '@/request/index';
import { ElMessage } from 'element-plus';
import { checkPermission } from '@/commons/utils';

const form = reactive({
    // page: 1,
    // perPage: 999
});
const totalCount = ref(0);
const tableList = reactive([]);
const tableColumns = reactive([
    { label: '标题', prop: 'title', showOverflowTooltip: true, width: '250' },
    { label: '关键词', prop: 'keywordText', showOverflowTooltip: true },
    { label: '操作', prop: 'operations', width: '140', fixed: 'right' }
]);
let dialogVisible = ref(false);
let query = reactive({});

const handleCreate = () => {
    dialogVisible.value = true;
};
const handleRemove = async ({ id }) => {
    await request('miniappMsgTplRemove', { id });
    ElMessage({
        type: 'success',
        message: '删除成功'
    });
    queryCouponListHandler();
};
/**
 * 分页
 * @param {*} page
 */
const changePageHandler = page => {
    form.page = page;
    queryCouponListHandler();
};

/**
 * 每页记录数修改
 * @param {*} perPage
 */
const changeSizeHandler = perPage => {
    form.page = 1;
    form.perPage = perPage;
    queryCouponListHandler();
};
/**
 * 分页查询
 */
const queryCouponListHandler = async () => {
    if (!checkPermission('setmall_notice_subscribe:view')) {
        return;
    }
    const res = await request('miniappMsgTplList', form);
    const list = (res.data.list || []).map(item => {
        item.keywordText = item.keywordList.map(item => item.name);
        return item;
    });
    tableList.length = 0;
    Object.assign(tableList, list);
    totalCount.value = res.data.totalCount;
};
onMounted(() => {
    queryCouponListHandler();
});
</script>

<style lang="scss" scoped>
%scroll {
    &::-webkit-scrollbar {
        width: 5px;
        height: 40px;
    }
    &::-webkit-scrollbar-track {
        background: #fff;
        border-radius: 3px;
    }
    &::-webkit-scrollbar-thumb {
        background: #d8d8d8;
        border-radius: 3px;
    }
    &::-webkit-scrollbar-thumb:hover {
        background: #333;
    }
    &::-webkit-scrollbar-corner {
        background: #179a16;
    }
}

.setmall_customer_create {
    &_template {
        margin-bottom: 16px;
    }
}
.select-keyword-right {
    max-width: 364px;
    min-width: 280px;
    height: 336px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    display: flex;
    flex-direction: column;
    &-title {
        padding-left: 24px;
        display: flex;
        align-items: center;
        height: 56px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #33302d;
    }
    &-scroll {
        flex: 1;
        overflow-y: auto;
        border-top: 1px solid #eaeaea;
        border-bottom: 1px solid #eaeaea;
        padding: 16px 24px;
        @extend %scroll;
        h5 {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #33302d;
            margin: 0;
            margin-bottom: 16px;
        }
        & > div {
            margin-bottom: 16px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            span {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #969696;
                &:last-of-type {
                    color: #33302d;
                    margin-left: 8px;
                    word-break: break-all;
                    max-width: 200px;
                }
            }
        }
    }
    &-view {
        display: flex;
        justify-content: space-between;
        padding: 0 24px;
        align-items: center;
        height: 48px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #969696;
    }
}
</style>
